<template>
  <div class="right-container">
    <!-- <h3>Right 组件 --- 是否全选: {{ isAll }}</h3> -->
    <!-- getters 就是计算属性, 所以不需要加括号调用 -->
    <!-- <h3>Right 组件 --- 是否全选: {{ $store.getters.isAll }}</h3> -->
    <h3>Right 组件 --- 是否全选: {{ isAll }}</h3>
    <hr>

    <!-- <p>count 值：{{ $store.state.count }}</p> -->
    <p>count 值：{{ count }}</p>
    <!-- <button @click="btn" class="btn btn-warning">-1</button> -->
    <button @click="add({ num: -5 })" class="btn btn-warning">-5</button>
    <!-- <button @click="$store.dispatch('subAsync', { num: -7 })" class="btn btn-warning">异步-5</button> -->
    <button @click="subAsync({ num: -10 })" class="btn btn-warning">异步-10</button>
  </div>
</template>

<script>
// 辅助函数小结
// 1. mapState 用于将 Vuex 中 state 的数据映射到当前组件, 结合计算属性 computed 使用
// 2. mapMutations 用于将 Vuex 中 mutations 的函数映射到当前组件, 结合 methods 使用
// 3. mapActions 用于将 Vuex 中 actions 的函数映射到当前组件, 结合 methods 使用
// 4. mapGetters 用于将 Vuex 中 getters 的函数映射到当前组件, 结合 computed 使用


// mapMutation 的使用
// 1. 按需导入 mapMutations, mapActions, mapGetters
// import { mapMutations } from 'vuex'
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'Right',
  computed: {
    ...mapState(['count']),
    // isAll() {
    //   return this.$store.state.list.every(item => item.isDone)
    // }
    ...mapGetters(['isAll'])
  },
  methods: {
    // 2. 在 methods 中调用 mapMutations 传入要映射的 mutation 函数, 将结果用 ... 展开运算符展开
    // mapMutations 后, 可以在当前组件中访问到 add 函数
    // 所以 add 函数也可以直接作为事件的处理函数进行绑定, 当事件触发时会自动执行 add 函数
    ...mapMutations(['add', 'sub']),
    // btn() {
    //   // this.$store.commit('add', { num: -1 })
    //   this.add({ num: -1 })
    // }

    ...mapActions(['subAsync'])
  }
}
</script>

<style>
</style>
